home *** CD-ROM | disk | FTP | other *** search
/ Aminet 52 / Aminet 52 (2002)(GTI - Schatztruhe)[!][Dec 2002].iso / Aminet / docs / mags / saku09.lha / Teksti / HTML.txt < prev    next >
Text File  |  1994-10-21  |  12KB  |  228 lines
  1. 5
  2. 1*
  3.  
  4. {3                 HTML ja WWW - hypertekstin suuri mahdollisuus
  5. {3                 ---------------------------------------------
  6.  
  7.                                Antti Vähä-Sipilä 
  8.  
  9.  
  10. {3Mitä on HTML?
  11. {3-------------
  12.  
  13. Hyperteksti on nykyään pinnalla varsinkin Internetistä puhuttaessa.  Mitä  tämän
  14. termin taakse kätkeytyy? Hyperteksti on lyhyesti määriteltynä joukko dokumentte-
  15. ja, jossa käyttäjä voi siirtyä dokumentista  toiseen  sen  mukaan,  mikä  sattuu
  16. kiinnostamaan. Hypertekstiin voidaan liittää kuvia, animaatioita,  musiikkia  ja
  17. puhetta, ja  sen  ympärille  voidaan  luoda  täydellinen  hyper/multimediaesitys
  18. käytettävissä olevan laitteiston ja tiedonsiirtoverkon kapasiteetin rajoissa.
  19.  
  20. Pieni yksinkertainen esimerkki havainnollistanee asiaa. Luet juuri  Amigan  pro-
  21. sessorista kertovaa tekstiä, jossa esiintyy sana 68040. Teksti jatkuu  kuvaillen
  22. PowerPC:tä, mutta olet enemmän kiinnostunut Motorolan luomuksista - siksi  klik-
  23. kaat hiirelläsi "68040":aa, ja ruudulle ilmestyy lisätietoa tästä  avainsanasta.
  24. Tästäkin dokumentista pääset taas eteenpäin ja niin edelleen.  Teoriassa  yhteen
  25. hypertekstiin voidaan mahduttaa kaikki maailman oleellinen tieto.
  26.  
  27. Hyperteksti ei ole muodikkuudestaan huolimatta mikään uusi  ilmiö.  Mikäli  luet
  28. tätä artikkelia AmigaGuidella, luet sitä hypertekstinä. AmigaGuide on hyvin tyy-
  29. pillinen perushyperteksti. Se mahdollistaa tekstilinkkien (linkki on hyppy doku-
  30. mentista toiseen) lisäksi ulkoisten ohjelmien ajamisen, jolloin voidaan  esimer-
  31. kiksi katsoa kuvia tai kuunnella musiikkia. AmigaGuide näyttää tekstin  tavalli-
  32. sessa ikkunassa, joten esimerkiksi Sakua lukiessa hypertekstistä saa hiukan  ka-
  33. run vaikutelman. Hypertekstin suosio kasvaa koko ajan, ja yhä useammissa PD-  ja
  34. Shareware-ohjelmissa on dokumentointi ainoastaan  AmigaGuiden  .guide-loppuisena
  35. tiedostona.
  36.  
  37. AmigaGuidessa on kuitenkin tiettyjä rajoituksia. Dokumenttien on käytännössä ol-
  38. tava samalla koneella, mikä rajoittaa  tiedon  määrää.  AmigaGuide-yhteensopivia
  39. lukuohjelmiakaan ei ole olemassa kuin Amigalle  ja  PC:lle.  Ratkaisu  tähän  on
  40. standardeihin pohjautuva HTML-kieli.
  41.  
  42. HTML tulee sanoista HyperText Markup Language. Sillä kuvataan  näytettävä  doku-
  43. mentti erittäin samankaltaisella tyylillä kuin AmigaGuide, yleensä kylläkin  jo-
  44. kainen linkki jaetaan omaksi  .html-loppuiseksi  tiedostokseen.  Myös  tiedoston
  45. sisälle pystyy muodostamaan linkkejä kuten  AmigaGuidessakin.  HTML-dokumenttien
  46. lukemiseen on kehitetty useita lukuohjelmia, joista tunnetuimmat ovat tekstipoh-
  47. jaisille käyttöliittymille Lynx ja graafisille Mosaic.
  48.  
  49. Kun esimerkiksi Mosaic käynnistetään, se  hakee  ja  näyttää  aloitusdokumentin.
  50. Siitä eteenpäin Mosaic toimii AmigaGuiden kaltaisesti  kuitenkin  sillä  erolla,
  51. että linkki, joka dokumentissa on, voi osoittaa vaikka toisella puolella  maail-
  52. maa olevaan dokumenttiin. Nämä yhteenliitetyt  linkit  muodostavat  Internetissä
  53. maailmanlaajuisen World Wide Web - eli WWW- eli W3-verkon.  Tavallinen  käyttäjä
  54. ei huomaa maailmanlaajuisuutta kuin pitkistä hakuajoista (mikäli dokumentti hae-
  55. taan jostain hyvin kaukaa ruuhka-aikana) ja  satunnaisista  yhteydenottovaikeuk-
  56. sista (Internet on tunnettu siitä, ettei mikään yhteys ole sataprosenttisen var-
  57. masti pystyssä).
  58.  
  59. Internetissä on arviolta 30 miljoonaa käyttäjää ja miljoonia tietokoneita.  Kas-
  60. vuvauhti on arvioitu (juuri WWW:n suosion ansiosta) 20 prosentiksi  kuukaudessa.
  61. Miten omassa Amigassasi pyörivä pikku AMosaic voi löytää juuri sen  oikean  tie-
  62. doston näiden miljoonien koneiden kovalevyjen hakemistojen sokkeloista? Ratkaisu
  63. on URL, Uniform Resource Locator eli "yhtenäinen resurssienpaikallistin". Se  on
  64. rivi tekstiä, joka koostuu protokollasta, koneen  nimestä,  sen  sijainnista  ja
  65. tiedoston sijainnista tällä koneella.
  66.  
  67. Esimerkiksi Sakun kotisivu WWW:ssä sijaitsee osoitteessa
  68.  
  69. http://proffa.cc.tut.fi/~v150105/saku.html
  70.  
  71. Kun AMosaic saa tämän rivin, se ensinnäkin tietää, millainen yhteys  sen  täytyy
  72. ottaa, jotta dokumentti irtoaisi. HTTP on HyperText Transfer Protocol eli proto-
  73. kolla HTML-tiedostoja varten. Seuraavaksi ohjelma näkee,  minne  HTTP-pyyntö  on
  74. lähetettävä; kone on Suomessa (fi) sijaitseva Tampereen teknillisen korkeakoulun
  75. (tut) laskentakeskuksen (cc) opiskelijakone "proffa".  Sen  kovalevyiltä  löytyy
  76. käyttäjän v150105 kotihakemisto, jossa on dokumentti  saku.html.  (Itse  asiassa
  77. tässä tapauksessa dokumentti saku.html ei sijaitse tässä hakemistossa, vaan  ai-
  78. van muualla - mutta siitä taas ei URL:n käyttäjän kannata välittää; kyseessä  on
  79. symbolinen linkki.)
  80.  
  81. Myös muunlaisia URL:eja on mahdollisuus tehdä. Protokollista käytössä  ovat  mm.
  82. FTP, jolloin lukuohjelma toimii ftp-ohjelman tavoin. Sakun lähes  kaikki  aikai-
  83. semmat numerot löytyvätkin URL:sta
  84.  
  85. ftp://ftp.funet.fi/pub/amiga/misc/diskmags/Finnish/
  86.  
  87. Vanhempi tiedonetsintäohjelma Gopher on myös tuettujen protokollien joukossa, ja
  88. lisäksi  lukuohjelmilla  voi  sopivilla  URL:eilla  lähettää  mailia  ja   lukea
  89. newssejä.
  90.  
  91. Kun WWW:ssä liikkuu ja seuraa kiinnostavalta tuntuvia linkkejä, voi äkkiä löytää
  92. itsensä esimerkiksi Etelä-Afrikasta. Eksyminen on helppoa, mutta onneksi  ohjel-
  93. missa on muutama edellinen linkki tallessa, jotta taaksepäin voi palata. Vaikeu-
  94. tena on suuren suuresta valikoimasta  löytää  haluamansa  tieto.  Siihen  auttaa
  95. FAQ-tiedostojen lukeminen, WWW-uutisryhmien aktiivinen seuraaminen ja hakemisto-
  96. sivujen käyttö. Parhaimmilla hakemistosivuilla on  satoja  linkkejä  tärkeimpiin
  97. paikkoihin.  WWW:stä  löytyvät  esimerkiksi  tämänhetkiset   sääsatelliittikuvat
  98. ympäri maapallon. WWW ja Internet ovat niin  laajoja  käsitteitä,  etten  niihin
  99. tämän enempää paneudu. Aloittelija voi lainata kirjastosta Kari Hintikan  kirjan
  100. "Internet: Kalastusta tietoverkoilla", jonka pitäisi olla varsin  hyvä  esittely
  101. asiasta.
  102.  
  103. Palataan vielä AmigaGuideen. Esimerkiksi Saku  julkaistaan  aina  diskettilehden
  104. lisäksi AmigaGuidena ja nykyään myös HTML-dokumenttina, jotka saa  luettavakseen
  105. URL:sta http://proffa.cc.tut.fi/~v150105/saku.html.  Koska  AmigaGuide  ja  HTML
  106. ovat niin lähellä toisiaan,  syötämme  vain  valmiin  .guide  -tekstin  kuvineen
  107. päivineen ohjelmalle, joka sylkäisee toisesta päästä kasan .html-tiedostoja. Ku-
  108. vat käännetään GIF:eiksi, koska GIF on  (de  facto?)  standardi  tekstin  seassa
  109. näytettäville kuville (nk. inline images).
  110.  
  111. AmigaGuidesta HTML:ään kääntäviä ohjelmia on ainakin kaksi, jotka löytyvät  Ami-
  112. netistä. Toinen on perl-skripti, ag2html, jota on käytetty  Sakun  käännöksessä.
  113. Toinen on C-kielinen ohjelma guide2html. Ne ovat  periaatteessa  aivan  toisiaan
  114. vastaavia. Päinvastaiseen suuntaan kääntävän ohjelman tekeminen ei ole sen  vai-
  115. keampaa, mutta niitä ei ole näkynyt, ja niille onkin vähemmän käyttöä.  Ohjelmat
  116. saa ainakin Aminetin FTP-siteilta.
  117.  
  118. Ag2html-skriptin saat itsellesi esimerkiksi Sakun kotisivuilta  löytyvästä  lin-
  119. kistä. Jokaisen käännetyn AG-sivun loppuun ilmestyy tämän käännösohjelman  "mai-
  120. nos".
  121.  
  122.  
  123.  
  124. Seuraavassa osuudessa käyn lähemmin läpi, miten saat nopeasti  tehtyä  itsellesi
  125. oman sivun WWW:hen, jos sinulla on Internetiin kiinteästi liitetty kone tai tun-
  126. nus esimerkiksi korkeakoulun tai kaupallisen laitoksen koneella.
  127.  
  128.  
  129. {3                        Kuinka luon oman WWW-kotisivun?
  130. {3                        -------------------------------
  131.  
  132. {31. Perusteet
  133. {3------------
  134.  
  135. Haluat siis tehdä verkkoon oman WWW-kotisivun. Jos koneellasi on muillakin  sel-
  136. laisia, niin asian pitäisi onnistua. Muutoin ota yhteyttä koneesi ylläpitoon  ja
  137. kysy, onko se mahdollista.
  138.  
  139. Dokumentit löytyvät kotihakemistossasi olevasta  public_html-nimisestä  hakemis-
  140. tosta, joten luo sellainen. Oletusarvoinen aloitusdokumentti  on  tekstitiedosto
  141. nimeltä index.html, eli tee editorillasi kyseinen dokumentti, jossa lukee
  142.  
  143. <html><head></head><body></body></html>
  144.  
  145. Olet  juuri  tehnyt  itsellesi  tyhjän  kotisivun  WWW:hen.  Kotisivusi  URL  on
  146. http://koneesi.nimi.tähän/~käyttäjätunnus/  jossa  "koneesi.nimi.tähän"  muuttuu
  147. esimerkiksi "mits.mdata.fi":ksi ja ~käyttäjätunnus on  kotihakemistosi  (~  tar-
  148. koittaa kotihakemistoa), esimerkiksi ~avs.
  149.  
  150. Jos koneessasi näin on päätetty, sivusi ilmestynee viimeistään  seuraavana  yönä
  151. viralliseen kotisivulistaan. Yleensä URL  on  tällöin  muotoa  http://www.konee-
  152. si.nimi/~käyttistunnus/.  Tämä   vaihtelee   systeemin   ylläpidosta   riippuen.
  153. Kysäisepä sysadminiltasi.
  154.  
  155.  
  156. {32. Tietoa tarjolle
  157. {3------------------
  158.  
  159. Päätä ensin sivusi nimi. Lisää  <head>-  ja  </head>-merkintöjen  väliin  teksti
  160. <title>Sivuni nimi</title>. Olet juuri  saanut  valmiiksi  sivun  otsikkokentän.
  161. HTML-kieli jakaa tekstin  kenttiin,  jotka  alkavat  <komento>-  tunnuksella  ja
  162. päättyvät </komento>-tunnukseen. Ensimmäinen kenttä  on  <html>,  joka  ilmaisee
  163. HTML-kielisen dokumentin alkamisen. <head> ilmaisee otsikkokentän alun,  <title>
  164. sivun nimen. </title></head> lopettavat otsikkokentän ja <body> aloittaa  varsi-
  165. naisen sivun rungon. Sivu tulee tähän väliin ja ihan viimeiseksi jätetään  </bo-
  166. dy></html>.
  167.  
  168. Varsinainen tarjoamasi tieto tulee siis <body>- ja </body>-lausekkeiden  väliin.
  169. Tekstin voi kirjoittaa ilman, että huolehtii paljon sen  ulkoasusta;  WWW-lukija
  170. taittaa tekstin sivulle järkevän näköisesti. Nyt voit jo kirjoittaa jotain  jut-
  171. tua sivulle. Seuraavaksi katsomme, miten saat sivusi pelkästä  tekstistä  hyper-
  172. tekstiksi.
  173.  
  174.  
  175. {33. Linkkejä maailmalle
  176. {3----------------------
  177.  
  178. Linkit muodostetaan komennolla <a>  eli  anchor.  Koko  linkin  syntaksi  on  <a
  179. href="URL">Linkki</a>, jolloin sanaa "Linkki" klikkaamalla käyttäjä siirtyy  do-
  180. kumenttiin, johon osoittaa URL.
  181.  
  182. URL voi olla myös suhteellinen, eli  pelkkä  <a  href="osoitteet.html">  siirtää
  183. käyttäjän samassa  hakemistossa  olevaan  osoitteet.html-nimiseen  dokumenttiin.
  184. Esimerkkejä URLeista, kokeile:
  185.  
  186. http://proffa.cc.tut.fi/~v150105/saku.html (HTTP-yhteys Sakun sivuille)
  187. ftp://ftp.cdrom.com/pub/aminet/ (FTP-yhteys Aminettiin)
  188. gopher://oulu.fi/ (Oulun Gopher-yhteys)
  189. gopher://mits.mdata.fi:79//avs (Finger-komento)
  190. mailto:v150105@cc.tut.fi (Lähettää mailia)
  191. news:sfnet.atk.amiga (Lukee uutisryhmää)
  192.  
  193. Lisää URL-esimerkkejä löytyy kaikista WWW:tä käsittelevistä uutisryhmistä.
  194.  
  195.  
  196. {34. Hienosäätöä
  197. {3--------------
  198.  
  199. HTML-kieli on varsin monipuolinen, ja tuleva HTML+ on vielä laajempi.  Näin  pi-
  200. kaisessa aloittelijan oppaassa on turha käydä kaikkia aspekteja  läpi;  verkosta
  201. löytyy paljon hyviä oppaita (kotisivultani pääsee ainakin erittäin hyvään oppaa-
  202. seen). Käsitellään lyhyesti pari oleellista asiaa tulostuksen muotoilun osalta:
  203. <pre> ja </pre> aiheuttavat sen, että  näiden  välissä  oleva  teksti  näytetään
  204. non-proportional-fontilla, eli jokainen kirjain vie saman verran tilaa  ja  että
  205. tekstin muotoilu on juuri se mitä haluat (pre=preformatted).
  206.  
  207. <br> katkaisee rivin juuri siitä (br=break).
  208.  
  209. <ul> aloittaa listan (ul=unbulleted list).  Listoja  on  useita  tyyppejä,  tämä
  210. niistä yksi. Jokainen listan rivi laitetaan  <li>-  ja  </li>-komentojen  väliin
  211. (li=list), ja lista lopetetaan </ul>:llä, esimerkiksi:
  212.  
  213. <ul>
  214. <li>Rivi 1</li>
  215. <li>Rivi 2</li>
  216. <li><a href="foo.html">Tämä rivi sisältää linkin</a></li>
  217. <li>Rivi 4</li>
  218. </ul>
  219.  
  220. <p> ja </p> rajaavat tekstikappaleen (p=paragraph). Itse asiassa näitä ei  _tar-
  221. vitsisi_ käyttää pareina,  mutta  HTML-kielen  määritelmän  mukaan  näin  täytyy
  222. tehdä. Siksi suosittelen, että _jokainen_ komento  annetaan  aina  täydellisenä,
  223. eli dokumentissa on sekä komennon aloitus- että lopetusmerkit.
  224.  
  225. Jos näet jollakin sivulla hienon trikin,  voit  oppia,  miten  se  tehdään,  kun
  226. käytät WWW-lukijasi View Source -toimintoa, Lynxillä ainakin joissain versioissa
  227. \-merkki. 
  228.